<template>
	<view
		:class="[styleType === 'text' ? 'segmented-control--text' : 'segmented-control--button']"
		:style="{ borderColor: styleType === 'text' ? '' : activeColor }"
		class="segmented-control"
	>
		<view
			v-for="(item, index) in values"
			:class="[
				styleType === 'text' ? '' : 'segmented-control__item--button',
				index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
				index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last' : ''
			]"
			:key="index"
			:style="{
				backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : styleType === 'button' ? inActiveColor : 'transparent',
				borderColor: (index === currentIndex && styleType === 'text') || styleType === 'button' ? activeColor : inActiveColor
			}"
			class="segmented-control__item"
			@click="_onClick(index)"
		>
			<view style="position: relative">
				<text
					:style="{ color: index === currentIndex ? (styleType === 'text' ? activeColor : '#fff') : styleType === 'text' ? '#000' : activeColor }"
					class="segmented-control__text"
					:class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text' : ''"
				>
					{{ item }}
				</text>
				<view
					:style="{ color: index === currentIndex ? (styleType === 'text' ? activeColor : '#fff') : styleType === 'text' ? '#000' : activeColor }"
					class="segmented-control__text_bt"
					:class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text-bt' : ''"
				></view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * SegmentedControl 分段器
 * @description 用作不同视图的显示
 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
 * @property {Number} current 当前选中的tab索引值，从0计数
 * @property {String} styleType = [button|text] 分段器样式类型
 * 	@value button 按钮类型
 * 	@value text 文字类型
 * @property {String} activeColor 选中的标签背景色与边框颜色
 * @property {String} inActiveColor 未选中的标签背景色与边框颜色
 * @property {Array} values 选项数组
 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
 */

export default {
	name: 'UniSegmentedControl',
	emits: ['clickItem'],
	props: {
		current: {
			type: Number,
			default: 0
		},
		values: {
			type: Array,
			default() {
				return [];
			}
		},
		activeColor: {
			type: String,
			default: '#76A26F'
		},
		inActiveColor: {
			type: String,
			default: 'transparent'
		},
		styleType: {
			type: String,
			default: 'button'
		}
	},
	data() {
		return {
			currentIndex: 0
		};
	},
	watch: {
		current(val) {
			if (val !== this.currentIndex) {
				this.currentIndex = val;
			}
		}
	},
	computed: {},
	created() {
		this.currentIndex = this.current;
	},
	methods: {
		_onClick(index) {
			if (this.currentIndex !== index) {
				this.currentIndex = index;
				this.$emit('clickItem', {
					currentIndex: index
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.segmented-control {
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	height: 36px;
	overflow: hidden;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
	width: 100%;
	overflow-x: auto;
	/* 启用横向滚动 */
	white-space: nowrap;
	/* 防止换行 */
}

/* 隐藏默认滚动条（可选） */
// .custom-segmented-control::-webkit-scrollbar {
//   display: none;
// }
/* 调整子元素样式 */
// .custom-segmented-control >>> .uni-segmented-control__item {
//   display: inline-block; /* 横向排列 */
//   flex-shrink: 0;       /* 防止内容被压缩 */
//   min-width: 120rpx;    /* 设置最小宽度 */
// }

.segmented-control__item {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	box-sizing: border-box;
	/* #endif */
	position: relative;
	// flex: 1;
	justify-content: center;
	align-items: center;
	display: inline-block;
	/* 横向排列 */
	flex-shrink: 0;
	/* 防止内容被压缩 */
	margin-right: 34rpx;
	flex: 0 0 auto;
	// min-width: 170rpx;    /* 设置最小宽度 */
}

.segmented-control__item--button {
	border-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-left-width: 0;
}

.segmented-control__item--button--first {
	border-left-width: 1px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.segmented-control__item--button--last {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.segmented-control__item--text {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	padding: 6px 0;
}

.segmented-control__text {
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.segmented-control__item--text-bt {
	background: #76a26f;
	box-shadow: 0rpx 0rpx 6rpx rgba(126, 191, 254, 0.1);
	border-radius: 22rpx;
	height: 6rpx;
	// margin-top: 10rpx;
	position: absolute;
	bottom: -15rpx;
	z-index: 10;
	width: 100%;
}
</style>
